<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script>
        var index = 0;

        function addChatBox() {
            var prompt = document.getElementById("prompt").value;
            console.log(prompt)
            // create a new div element
            var newDiv = document.createElement("div");
            // set the class of the new div element
            newDiv.id = index;
            newDiv.innerText = prompt
            // add the new div element to the body of the HTML document
            document.body.appendChild(newDiv);
            index++;
            var source = new EventSource('http://localhost:8080/demo?prompt=' + prompt);
            var reply = document.createElement("div");
            // set the class of the new div element
            reply.id = index;
            document.body.appendChild(reply);
            source.onmessage = function (event) {
                if (event.data === "[DONE]") {
                    source.close()
                    index++;
                }
                let jsonObj = JSON.parse(event.data);

                for (let i = 0; i < jsonObj.choices.length; i++) {
                    if (jsonObj.choices[i].delta.content !== undefined) {
                        reply.innerText += jsonObj.choices[i].delta.content
                    }
                }


            };
        }
    </script>
    <style>
        .chat-box {
            width: 300px;
            height: 100px;
            background-color: #f2f2f2;

        }
    </style>
</head>
<body>
<input id="prompt" type="text">
<button onclick="addChatBox()">提交</button>
</body>
</html>

<!-- The above code creates a button that, when clicked, adds a new chat box to the HTML document. The chat box is created using a new div element with a class of "chat-box". The CSS styles for the "chat-box" class are defined in the style section of the HTML document. The chat box is positioned in the center of the screen using absolute positioning and the transform property. The button that triggers the creation of the chat box is created using a button element with an onclick attribute that calls the addChatBox() function when clicked. -->